<template>
    <a-form layout="vertical" class="rx-a-form-vertical">
        <a-form-item :label="$ti18('rxList.title','标题')">
            {{ infInnerMsg.msgTitle }}
        </a-form-item>

        <a-form-item :label="i18n('form.sender','发送人')">
            <a-tag>
                <UserOutlined/>
                {{ infInnerMsg[sender] }}
            </a-tag>
        </a-form-item>

        <a-form-item :label="i18n('form.sendTime','发送时间')">
            {{ infInnerMsg.createTime }}
        </a-form-item>

        <a-form-item :label="i18n('form.msgContent','消息内容')">
            <div v-html="infInnerMsg.content"></div>
        </a-form-item>

        <a-form-item v-if="isSender" :label="i18n('list.sendUser','发送至用户')">
            <a-tag v-for="user in infInnerMsg.userList">
                <UserOutlined/>
                {{ user.name }}
            </a-tag>
        </a-form-item>

        <a-form-item v-if="isSender" :label="i18n('list.sendGroup','发送至用户组')">
            <a-tag v-for="group in infInnerMsg.groupList">
                <TeamOutlined/>
                {{ group.name }}
            </a-tag>
        </a-form-item>

    </a-form>
</template>
<script>

export default {
    name: 'ReadMessage',
    props: {
        infInnerMsg: {
            type: Object,
            default: {}
        },
        sender: {
            type: String,
            default: 'sender'
        },
        isSender: {
            type: Boolean,
            default: false
        }
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "infInnerMsg", key);
        },
    },
}
</script>
<style scoped>
.rx-a-form-vertical{
    padding: 10px;
    height: 100%;
    width: 100%;
    overflow: auto;
}
.rx-a-form-vertical ::v-deep(.ant-form-item-control){
    color: #7e7e7e;
}
</style>
